<template>
  <uni-nav-bar title="福利" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
  <view class="welfares" :style="{ height: pageHeight + 'px' }">
    <view class="active" v-for="(item, index) in activityList" :key="index" @click="addwelf(item.id)">
      <uni-icons type="checkbox-filled" :color="welfareID === item.id ? '#2979ff' : '#999'" size="28"></uni-icons>
      <view class="left_active">
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
  <view class="bottom" @click="submit()">确认发放</view>
</template>

<script setup lang="ts">
import { welfare } from '@/gql/welfare';
import { getDriverID } from '@/stores/driverID';
import { navBack, navTo } from '@/utils/navigator';
import { showToast } from '@/utils/prompt';
import { onLoad } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { onMounted, Ref, ref } from 'vue';

// static
let activeID = null as number; //选中的活动ID
let activeWelf = ''; //业务
const pageHeight = ref('');
const activityList = ref([]); //福利列表
const driver_id = getDriverID();
const userID = uni.getStorageSync('welfareId');
// data
let welfareID: Ref<number> = ref(null); //选中的福利ID
const repeat = ref(true)//放重复点击
onLoad((options) => {
  activeID = Number.parseInt(options.id);
  activeWelf = options.activeWelf ? options.activeWelf : '';
  welfareList();
});

onMounted(() => {
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 120).toString();
    },
  });
});

/**
 * 获取福利列表
 */
function welfareList() {
  const payload = {
    query: welfare,
    variables: {
      activity_id: activeID,
    },
  };
  toPublish('ql/welfare/welfareList', payload, (obj: any) => {
    const { welfare_list } = obj.data;
    activityList.value = welfare_list;
  });
}
/**
 * @param {Object} num 存储选中的福利ID
 */
function addwelf(num) {
  welfareID.value = num;
}
/**
 * 提交发放的福利
 */
function submit() {
  if (!welfareID) {
    showToast('请选择您要发放的福利');
    return;
  }
  if(!repeat.value){
    return
  }
  repeat.value=false
  const payload = {
    admin_id: driver_id,
    driver_id: userID,
    activity_id: activeID,
    welfare_id: welfareID.value,
    ids: activeWelf,
  };
  toPublish('welfare/grantWelfare', payload, (obj: any) => {
    const { code, msg } = obj;
    repeat.value=true
    welfareID = null;
    showToast(msg);
    if (code === 1) {
      welfareList();
      navTo('welfare/record');
    }
  });
}
</script>

<style lang="less">
.welfares {
  width: 100%;
  overflow: auto;
}
.active {
  width: 95%;
  margin: 2.5%;
  height: 124rpx;
  background: #ffffff;
  border-radius: 5px;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left_active {
    width: 90%;
    text {
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    text:nth-of-type(1) {
      font-size: 30rpx;
    }
    text:nth-of-type(2) {
      font-size: 22rpx;
    }
  }
}
.bottom {
  width: 310rpx;
  margin: 20rpx auto;
  height: 88rpx;
  background: #1697ff;
  border-radius: 5px;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fffefe;
  text-align: center;
  line-height: 88rpx;
}
</style>
